import React, { Component } from 'react'

const Context1 = React.createContext()
const Context2 = React.createContext()

class CompA extends Component {
    render () {
        return (<Context1.Consumer>
            {(value) =>
                <h3>
                    字体大小：{value}px<br/>
                    <Context2.Consumer>
                        {(value1) =>
                            <span>
                                主题：{value1}
                            </span>
                        }
                    </Context2.Consumer>
                </h3>
            }
        </Context1.Consumer>)
    }
}

class Consumer extends Component {
    render () {
        return (
            <Context1.Provider value={20}>
                <Context2.Provider value={'dark'}>
                    <CompA/>
                </Context2.Provider>
            </Context1.Provider>
        )
    }
}

export default Consumer

